import React,{Component} from 'react'; // 数字输入框通用组件

import './inputNumber.scss';
export default class InputNumber extends Component{
	constructor (props) {
		super(props)
	}
	numChange (e) {
		let num = e.target.value
		if (num > this.props.stocks) {
			num = this.props.stocks
		}
		if (num <= 0) {
			num = 1
		}
		this.props.changeNum(num)
	}
	addNumber () {
		let num = this.props.shopNumber + 1
		if (num > this.props.stocks) {
			num = this.props.stocks
		}
		this.props.changeNum(num)
	}
	reduceNumber () {
		let num = this.props.shopNumber - 1
		if (num <= 0) {
			num = 1
		}
		this.props.changeNum(num)
	}
	doNothing (e) {
		e.stopPropagation()
	}
	render () {
		return(
			<div className='input_number' onClick={this.doNothing}>
				<div className={`add_btn ${this.props.shopNumber === 1 && 'readOnly'}`} onClick={this.reduceNumber.bind(this)}>
					-
				</div>
				<input value={this.props.shopNumber} onChange={this.numChange.bind(this)} type='number' />
				<div className={`reduce_btn ${this.props.shopNumber === this.props.stocks && 'readOnly'}`} onClick={this.addNumber.bind(this)}>
					+
				</div>
			</div>
		)
	}
}
